<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加课程</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <style type="text/css">
        body{
            background-color: transparent;
        }
        .text{
            color: white;
            font-size: large;
            font-weight: bold;
        }
        .row{
            margin: 25px auto;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <form id="add-form">
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">课程名称</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input class="input-view form-control" type="text" name="lesson-name" id="lesson-name">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">教师名称</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input class="input-view form-control" type="text" name="teacher" id="teacher">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">上课地点</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input class="input-view form-control" type="text" name="location" id="location">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">背景颜色:</span><output id="o" class="text" for="text-color"></output>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="color" name="color" id="color" onchange="o.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">上课时间：周</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input class="input-view form-control" type="number" min="1" max="7" name="day-of-week" id="day-of-week">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">上课时间：开始时间</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input class="input-view form-control" type="number" min="1" max="5" name="start" id="start">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">上课时间：结束时间</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input class="input-view form-control" type="number" min="1" max="5" name="end" id="end">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">上课周次（以,分隔）</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input class="input-view form-control" type="text" name="weeks" id="weeks">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-success" onclick="toSave()" style="width: 100%">保存</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript">
    /*保存用户配置*/
    function toSave() {
        $(function () {
            $.ajax({
                type: 'POST',
                url: '/add_lesson',
                data: $('#add-form').serialize(),
                success: function (result) {
                    switch (result.resultCode) {
                        case 200:{
                            Swal.fire({
                               title: '成功',
                               text: '保存成功',
                               icon: 'success',
                               confirmButtonText: '确定'
                            });
                            break;
                        }
                        case 404:{
                            Swal.fire('提示', '您还没有登录Sunshine课程表', 'error');
                            break;
                        }
                        case 500:{
                            Swal.fire('提示', '服务器出现了问题，问题如下：' + result.message, 'error')
                        }
                    }
                },
                error: function () {
                    Swal.fire('提示', "保存失败，未知问题", 'error');
                }
            })
        })
    }
</script>
</html>